<template>
  <div class="work-print">
    <div class="print-top" id="print-top">
      <h3>打印预览</h3>
      <div>
        <el-button
          class="btn-text-blue"
          size="mini"
          icon="el-icon-printer"
          @click="print"
          >打印</el-button
        >
      </div>
    </div>
    <div class="detailPage" id="print">
      <table
        border="0"
        cellpadding="0"
        cellspacing="0"
        align="center"
        name="outer-table"
        style="margin: 0 auto"
      >
        <tbody>
          <tr id="print-header1">
            <td align="center">
              <div class="print-title">电力线路第一种工作票</div>
            </td>
          </tr>
          <tr id="print-header2">
            <td align="right" height="32px" style="padding-right: 300px">
              <span>编号：</span>
              <span class="underline underline_width">{{ code }}</span>
            </td>
          </tr>
          <div class="content" id="print-content">
            <tr>
              <td align="left" height="32px">
                <table width="100%">
                  <tbody>
                    <tr>
                      <td>
                        1、单位（部门）名称：<span class="underline">{{
                          editFormData.workInfo.construction || ""
                        }}</span>
                        班组：<span
                          v-for="item in editFormData.workTeamList"
                          :key="item.index"
                          class="underline span-text"
                          >{{ item.workTeamName || "" }}</span
                        >
                      </td>
                    </tr>
                    <tr>
                      <td>
                        2、工作负责人用户名：<span class="underline">{{
                          editFormData.workTicket.directorName || ""
                        }}</span
                        >{{ " "
                        }}<span class="underline"
                          >电话：{{ editFormData.workInfo.phone || "" }}</span
                        >
                      </td>
                    </tr>
                    <tr>
                      <td>
                        3、工作班人员：<span
                          v-for="item in editFormData.workMemberList"
                          :key="item.index"
                          class="underline span-text"
                          >{{ item.memberName || "" }}</span
                        >共<span class="underline span-text"
                          >{{ editFormData.workTicket.number || "" }} </span
                        >人
                      </td>
                    </tr>
                    <tr>
                      <td>
                        4、停电线路名称（包括同一调度部门调度的需要停电的同杆架设、交叉、多电源线路称号）：
                        <span class="underline">{{
                          editFormData.workInfo.equipmentName || ""
                        }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        5、工作地段（注明分、支路名称，线路的起止杆号）：
                        <span class="underline">{{
                          editFormData.workInfo.workRange || ""
                        }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        6、工作任务：
                        <span class="underline">{{
                          editFormData.workTicket.content || ""
                        }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span style="border-bottom: 0.5px solid">7、</span
                        >工作要求的安全措施：
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <table
                          width="100%;"
                          cellpadding="0"
                          border="1"
                          cellspacing="0"
                          align="center"
                          name="outer-table"
                          style="margin: auto"
                        >
                          <tbody>
                            <tr>
                              <td align="center">站名</td>
                              <td align="center" colspan="2">安全措施</td>
                            </tr>
                            <tr
                              v-for="item in editFormData.securityArrangementList"
                              :key="item.index"
                              class="no-break"
                            >
                              <td
                                width="50px"
                                align="center"
                                :rowspan="item.mergeLength"
                                v-show="item.mergeLength"
                              >
                                {{ item.type }}
                              </td>
                              <td
                                width="160px"
                                style="padding-left: 6px"
                                v-if="item.value"
                              >
                                {{ item.item }}
                              </td>
                              <td style="padding-left: 6px" v-if="item.value">
                                {{ item.value }}
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        8、保留的带电线路或带电设备：
                        <span class="underline">{{
                          editFormData.workInfo.equipmentCharged || ""
                        }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td>9、在工作地段验明无电后应装设的临时接地线：</td>
                    </tr>
                    <tr>
                      <td>
                        <table
                          width="100%"
                          cellpadding="0"
                          border="1"
                          cellspacing="0"
                          align="center"
                          name="outer-table"
                          style="margin: auto"
                        >
                          <tbody
                            align="center"
                            class="no-break"
                            v-for="item in lineDetails"
                            :key="item.index"
                          >
                            <tr>
                              <td width="25%">
                                {{ item.value }}
                              </td>
                              <td width="25%">
                                {{ item.value1 }}
                              </td>
                              <td width="25%">
                                {{ item.value2 }}
                              </td>
                              <td width="25%">
                                {{ item.value3 }}
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        10、计划工作时间：自<span class="underline-time">{{
                          editFormData.workTicket.estimatedStartTime
                            ? editFormData.workTicket.estimatedStartTime.substr(
                                0,
                                4
                              )
                            : ""
                        }}</span>
                        年<span class="underline-time">{{
                          editFormData.workTicket.estimatedStartTime
                            ? editFormData.workTicket.estimatedStartTime.substr(
                                5,
                                2
                              )
                            : ""
                        }}</span>
                        月<span class="underline-time">{{
                          editFormData.workTicket.estimatedStartTime
                            ? editFormData.workTicket.estimatedStartTime.substr(
                                8,
                                2
                              )
                            : ""
                        }}</span>
                        日<span class="underline-time">{{
                          editFormData.workTicket.estimatedStartTime
                            ? editFormData.workTicket.estimatedStartTime.substr(
                                11,
                                2
                              )
                            : ""
                        }}</span>
                        时
                        <span class="underline-time">{{
                          editFormData.workTicket.estimatedStartTime
                            ? editFormData.workTicket.estimatedStartTime.substr(
                                14,
                                2
                              )
                            : ""
                        }}</span>
                        分至
                        <span class="underline-time">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                0,
                                4
                              )
                            : ""
                        }}</span>
                        年<span class="underline-time">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                5,
                                2
                              )
                            : ""
                        }}</span>
                        月<span class="underline-time">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                8,
                                2
                              )
                            : ""
                        }}</span>
                        日<span class="underline-time">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                11,
                                2
                              )
                            : ""
                        }}</span>
                        时
                        <span class="underline-time">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                14,
                                2
                              )
                            : ""
                        }}</span>
                        分
                      </td>
                    </tr>
                    <tr>
                      <td>
                        11、工作票签发人（签名）：{{ editFormData.signer
                        }}<span class="blank-text-100"></span
                        >工作票负责人（签名）：{{
                          editFormData.workTicket.directorName || ""
                        }}<span class="blank-text-100"></span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        12、工作票接收：收到工作票时间：<span
                          class="blank-text-10"
                          >{{
                            editFormData.workTicket.estimatedEndTime
                              ? editFormData.workTicket.estimatedEndTime.substr(
                                  0,
                                  4
                                )
                              : ""
                          }}</span
                        >
                        年<span class="blank-text-10">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                5,
                                2
                              )
                            : ""
                        }}</span>
                        月<span class="blank-text-10">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                8,
                                2
                              )
                            : ""
                        }}</span>
                        日<span class="blank-text-10">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                11,
                                2
                              )
                            : ""
                        }}</span>
                        时
                        <span class="blank-text-10">{{
                          editFormData.workTicket.estimatedEndTime
                            ? editFormData.workTicket.estimatedEndTime.substr(
                                14,
                                2
                              )
                            : ""
                        }}</span>
                        分；值班负责人（签名）：{{ editFormData.dutyOfficer
                        }}<span class="blank-text-10"></span>
                      </td>
                    </tr>
                    <tr>
                      <td>13、许可开始工作命令：</td>
                    </tr>
                    <tr>
                      <td>
                        <table
                          width="100%"
                          cellpadding="0"
                          border="1"
                          cellspacing="0"
                          align="center"
                          name="outer-table"
                          style="margin: auto"
                        >
                          <tbody align="center" class="no-break">
                            <tr>
                              <td>许可命令方式</td>
                              <td>许可人</td>
                              <td>工作负责人</td>
                              <td>许可工作时间</td>
                            </tr>
                            <tr>
                              <td>
                                {{ editFormData.workPermit.permitType || "" }}
                              </td>
                              <td>{{ editFormData.workApprover5 }}</td>
                              <td>{{ editFormData.workLeader5 }}</td>
                              <td>
                                <span class="blank-text-10">{{
                                  editFormData.workPermit.workTime
                                    ? editFormData.workPermit.workTime.substr(
                                        0,
                                        4
                                      )
                                    : ""
                                }}</span>
                                年<span class="blank-text-10">{{
                                  editFormData.workPermit.workTime
                                    ? editFormData.workPermit.workTime.substr(
                                        5,
                                        2
                                      )
                                    : ""
                                }}</span>
                                月<span class="blank-text-10">{{
                                  editFormData.workPermit.workTime
                                    ? editFormData.workPermit.workTime.substr(
                                        8,
                                        2
                                      )
                                    : ""
                                }}</span>
                                日<span class="blank-text-10">{{
                                  editFormData.workPermit.workTime
                                    ? editFormData.workPermit.workTime.substr(
                                        11,
                                        2
                                      )
                                    : ""
                                }}</span>
                                时
                                <span class="blank-text-10">{{
                                  editFormData.workPermit.workTime
                                    ? editFormData.workPermit.workTime.substr(
                                        14,
                                        2
                                      )
                                    : ""
                                }}</span>
                                分
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        14、现场补充安全措施：
                        <span class="underline blank-text-100">{{
                          editFormData.workInfo.safetyMeasures
                        }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        15、工作完成，人员已全部撤离，工具、材料无遗留，接地线全部拆除，报告可以送电。
                      </td>
                    </tr>
                    <tr>
                      <td>16、工作终结的报告：</td>
                    </tr>
                    <tr>
                      <td>
                        <table
                          width="100%"
                          cellpadding="0"
                          border="1"
                          cellspacing="0"
                          align="center"
                          name="outer-table"
                          style="margin: auto"
                        >
                          <tbody align="center" class="no-break">
                            <tr>
                              <td>终结报告方式</td>
                              <td>许可人</td>
                              <td>工作负责人</td>
                              <td>终结报告时间</td>
                            </tr>
                            <tr>
                              <td>{{ editFormData.workWay6 }}</td>
                              <td>{{ editFormData.workApprover6 }}</td>
                              <td>{{ editFormData.workLeader6 }}</td>
                              <td>
                                <span class="blank-text-10">{{
                                  editFormData.endTime6
                                    ? editFormData.endTime6.substr(0, 4)
                                    : ""
                                }}</span>
                                年<span class="blank-text-10">{{
                                  editFormData.endTime6
                                    ? editFormData.endTime6.substr(5, 2)
                                    : ""
                                }}</span>
                                月<span class="blank-text-10">
                                  {{
                                    editFormData.endTime6
                                      ? editFormData.endTime6.substr(8, 2)
                                      : ""
                                  }}</span
                                >
                                日<span class="blank-text-10">{{
                                  editFormData.endTime6
                                    ? editFormData.endTime6.substr(11, 2)
                                    : ""
                                }}</span>
                                时
                                <span class="blank-text-10">{{
                                  editFormData.endTime6
                                    ? editFormData.endTime6.substr(14, 2)
                                    : ""
                                }}</span>
                                分
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        17、备注：
                        <span class="underline blank-text-100">{{
                          editFormData.endDescription
                        }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        18、 施工跟踪人：
                        <span class="underline blank-text-100"></span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        19 、① 本工作票对应布置安全措施操作票：
                        <span class="underline blank-text-100">{{ editFormData.operationA ? editFormData.operationA : "" }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        ② 本工作票对应解除安全措施操作票：
                        <span class="underline blank-text-100">{{ editFormData.operationB ? editFormData.operationB : "" }}</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <div id="print-blank">&nbsp;</div>
          </div>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { getWorkTicketData } from "@/api/twoTicketManagement/workTicket.js";
export default {
  data() {
    return {
      code: "",
      editFormData: {
        workInfo:{},
        workTicket:{},
        workPermit:{}
      },
      // 接地线
      lineDetails: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      let id = JSON.parse(this.$route.query.id);
      let type = "PowerLineFirst";
      let val = { id, type };
      let { data } = await getWorkTicketData(val);
      this.editFormData = JSON.parse(JSON.stringify(data));
      this.editFormData.workPermit = data.workPermit||{}
      let types = data.workFlowList;
      let signer = ""; // 工作票签发人-填写
      types.forEach((item) => {
        if (item.type) {
          if (item.type.substr(0, 4) == "type") {
            signer = signer + " " + item.name;
          }
        }
      });
      this.editFormData.signer = signer;
      let dutyOfficer = ""; // 值班负责人-接收
      let obj4 = types.find((i) => i.status == 4);
      if (obj4) {
        dutyOfficer = obj4.name;
      }
      this.editFormData.dutyOfficer = dutyOfficer;
      let workLeader5 = ""; // 负责人-许可
      let objLeader5 = types.find((i) => i.status == 5 && i.type == "name1");
      if (objLeader5) {
        workLeader5 = objLeader5.name;
      }
      this.editFormData.workLeader5 = workLeader5;
      let workApprover5 = ""; // 许可人-许可
      let objApprover5 = types.find((i) => i.status == 5 && i.type == "name0");
      if (objApprover5) {
        workApprover5 = objApprover5.name;
      }
      this.editFormData.workApprover5 = workApprover5;
      let endInfos = this.editFormData.workEndList||[];
      let workWay6 = ""; // 方式-工作终结
      let objWorkWay6 = endInfos.find((i) => i.status == 6);
      if (objWorkWay6) {
        workWay6 = objWorkWay6.type;
      }
      this.editFormData.workWay6 = workWay6;
      let workLeader6 = ""; // 负责人-工作终结
      let objLeader6 = types.find((i) => i.status == 6 && i.type == "name1");
      if (objLeader6) {
        workLeader6 = objLeader6.name;
      }
      this.editFormData.workLeader6 = workLeader6;
      let workApprover6 = ""; // 许可人-工作终结
      let objApprover6 = types.find((i) => i.status == 6 && i.type == "name0");
      if (objApprover6) {
        workApprover6 = objApprover6.name;
      }
      this.editFormData.workApprover6 = workApprover6;
      let endTime6 = ""; // 时间-工作终结
      if (objWorkWay6) {
        endTime6 = objWorkWay6.endTime;
      }
      this.editFormData.endTime6 = endTime6;
      let endDescription = ""; // 备注-工作票终结
      let objWorkWay7 = endInfos.find((i) => i.status == 7);
      if (objWorkWay7) {
        endDescription = objWorkWay7.endDescription;
      }
      this.editFormData.endDescription = endDescription;
      this.code = this.editFormData.workTicket.code
        ? this.editFormData.workTicket.code
        : "";
      this.mergeType(this.editFormData.securityArrangementList);
      let lineInfo = [];
      let remainder = this.editFormData.workLineList.length % 3;
      let len = (this.editFormData.workLineList.length - remainder) / 3;
      let sum = 0;
      let lens =
        this.editFormData.workLineList.length <= 3
          ? 2
          : this.editFormData.workLineList.length - len;
      lens = lens % 2 == 0 ? lens : lens + 1;
      for (let i = 0; i < lens; i++) {
        if (i == 0 || i % 2 == 0) {
          lineInfo[i] = {
            value: "线路名称及杆号:",
            value1: this.editFormData.workLineList[i + sum]
              ? this.editFormData.workLineList[i + sum].station
              : " ",
            value2: this.editFormData.workLineList[i + 1 + sum]
              ? this.editFormData.workLineList[i + 1 + sum].station
              : " ",
            value3: this.editFormData.workLineList[i + 2 + sum]
              ? this.editFormData.workLineList[i + 2 + sum].station
              : " ",
            index: i,
          };
        } else {
          lineInfo[i] = {
            value: "接地线编号:",
            value1: this.editFormData.workLineList[i - 1 + sum]
              ? this.editFormData.workLineList[i - 1 + sum].wire
              : " ",
            value2: this.editFormData.workLineList[i + sum]
              ? this.editFormData.workLineList[i + sum].wire
              : " ",
            value3: this.editFormData.workLineList[i + 1 + sum]
              ? this.editFormData.workLineList[i + 1 + sum].wire
              : " ",
            workTicketId: this.id,
            editable: true,
            index: i,
          };
          sum++;
        }
      }
      this.lineDetails = lineInfo; // 线路
      this.$nextTick(() => {
        let allHeight = document.body.scrollHeight;
        let disShowTop = document.getElementById("print-top").scrollHeight;
        let showHeight = allHeight - disShowTop;
        let header1 = document.getElementById("print-header1").scrollHeight;
        let header2 = document.getElementById("print-header2").scrollHeight;
        let sum = showHeight;
        let number = 1;
        let divHeight = document.getElementById("print-blank");
        if (showHeight >= 533) {
          sum = sum + header1 + header2;
        }
        let blank = 0;
        if (showHeight >= 533) {
          blank = sum % 533;
          number = (sum - blank) / 533; // 取余要考虑左右栏以及页边距 1cm = 28px (1123-56 = 1067)
        } else {
          blank = sum;
        }
        if (number == 0) {
        } else if (number % 2 == 0) {
          divHeight.style.height = blank + "px";
        } else {
          divHeight.style.height = blank + 533 + "px";
        }
      });
    },
    //打印
    async print() {
      window.print();
    },
    mergeType(data) {
      if (data.length > 0) {
        let indexList = [0];
        let sum = 0;
        let sumList = [];
        let sameName = data[0].type;
        for (let i = 0; i < data.length; i++) {
          data[i].editable = true;
          if (sameName == data[i].type) {
            sum = sum + 1;
            if (data.length - 1 == i) {
              sumList.push(sum);
            }
          } else {
            sameName = data[i].type;
            indexList.push(i);
            sumList.push(sum);
            sum = 0;
            i--;
          }
        }
        for (let i = 0; i < indexList.length; i++) {
          data[indexList[i]].mergeLength = sumList[i];
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.work-print {
  height: 100%;
  background-color: #fff;
  .print-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e1e1e1;
  }
  .detailPage {
    line-height: 24px;
    font-size: 16px;
    color: #000;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    .underline {
      border-bottom: 0.5px solid;
      padding: 0 10px;
    }
    .underline-time {
      border-bottom: 0.5px solid;
      padding: 0 3px;
    }
    .underline_width {
      display: inline-block;
      min-width: 120px;
      text-align: center;
    }
    .span-text {
      padding: 0 6px;
    }
    .blank-text-10 {
      display: inline-block;
      min-width: 10px;
      text-align: center;
    }
    .blank-text-100 {
      display: inline-block;
      min-width: 100px;
      text-align: center;
    }
    .print-title {
      padding: 10px 0;
      font-size: 30px;
      font-weight: 700;
    }
    .content {
      -moz-column-count: 2; /* Firefox */
      -webkit-column-count: 2; /* Safari and Chrome */
      column-count: 2;
    }
  }
  @media print {
    @page {
      /*A3: 297mm × 533mm*/
      size: A3 landscape; /* or size: A3; or size: 1123px 1588px; */
      // margin: 1cm 2.43cm 1cm 2.19cm;
      margin: 1cm 2.31cm;
      .no-break {
        page-break-inside: avoid;
      }
    }
    .print-top {
      display: none;
    }
  }
}
</style>